<template>
  <a-layout>
    <a-layout-sider class="side" :trigger="null" v-model:collapsed="collapsed" collapsible>
      <div class="logo" v-cloak>{{ collapsed ? '仁杰' : '海尔-海门仁杰店' }}</div>

      <a-menu
        theme="dark"
        mode="inline"
        v-model:openKeys="openKeys"
        v-model:selectedKeys="selectedKeys"
      >
        <a-menu-item key="数据驾驶舱">
          <router-link to="/">
            <RadarChartOutlined></RadarChartOutlined>
            <span>数据驾驶舱</span>
          </router-link>
        </a-menu-item>
        <a-sub-menu key="员工管理">
          <template #icon>
            <AppstoreOutlined></AppstoreOutlined>
          </template>
          <template #title>员工管理</template>
          <a-menu-item key="员工列表">
            <router-link to="/users">员工列表</router-link>
          </a-menu-item>
          <a-menu-item key="10">Option 10</a-menu-item>
          <a-menu-item key="11">Option 11</a-menu-item>
          <a-menu-item key="12">Option 12</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="业务管理">
          <template #icon>
            <AppstoreOutlined></AppstoreOutlined>
          </template>
          <template #title>业务管理</template>
          <a-menu-item key="工单列表">
            <router-link to="/orders">工单列表</router-link>
          </a-menu-item>
          <a-menu-item key="10">Option 10</a-menu-item>
          <a-menu-item key="11">Option 11</a-menu-item>
          <a-menu-item key="12">Option 12</a-menu-item>
        </a-sub-menu>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header class="header">
        <menu-unfold-outlined class="trigger" v-if="collapsed" @click="flip"></menu-unfold-outlined>
        <menu-fold-outlined class="trigger" v-else @click="flip"></menu-fold-outlined>
        <a-dropdown class="profile">
          <a class="ant-dropdown-link" @click.prevent>
            Hi, Admin
            <DownOutlined />
          </a>
          <template #overlay>
            <a-menu>
              <a-menu-item>
                <UserOutlined />个人信息
              </a-menu-item>
              <a-menu-item>
                <LockOutlined></LockOutlined>修改密码
              </a-menu-item>
              <a-menu-item @click="logout">
                <UserSwitchOutlined></UserSwitchOutlined>注销登录
              </a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
      </a-layout-header>
      <Bread />
      <a-layout-content class="container">
        <router-view></router-view>
      </a-layout-content>
      <a-layout-footer style="text-align: center">Ant Design ©2018 Created by Ant UED</a-layout-footer>
    </a-layout>
  </a-layout>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'

import { useRouter } from 'vue-router'
import Bread from '~/widgets/Bread.vue'

const selectedKeys = ref<string[]>(['1'])
const openKeys = ref<string[]>([])
const collapsed = ref<boolean>(false)

const flip = () => collapsed.value = !collapsed.value

const router = useRouter()


const onCollapse = (collapsed: boolean, type: string) => {
  console.log(collapsed, type)
}
const logout = () => {
  console.log('logout clicked')
  router.push('/login')
}
const route = router.currentRoute.value
const key = route.meta.module as string
const sel = route.name as string
if (key) {
  openKeys.value = [key]
}
selectedKeys.value = [sel]


</script>
<style scoped lang="scss">
.trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;

  &:hover {
    color: #1890ff;
  }
}

.side {
  height: 100vh;
}

.logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.3);
  margin: 16px;
  line-height: 32px;
  letter-spacing: 2px;
  color: white;
  display: flex;
  justify-content: center;
  font-weight: bold;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  transition: width ease;
}

.site-layout .site-layout-background {
  background: #fff;
}

.container {
  margin: 24px 16px;
  padding: 24px;
  background-color: white;
  min-height: 280px;
}

.header {
  background: #fff;
  padding: 0;
}

.profile {
  float: right;
  margin-right: 20px;
}
</style>
